<template>
    <div class="bg">
        <el-card class="form-card">
            <template #header>
                <div class="card-header">
                    <span>发布公告</span>
                </div>
            </template>
            <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" />
                </el-form-item>
                <el-form-item label="置顶" prop="is_sticky">
                    <el-switch size="large" v-model="form.is_sticky" inline-prompt active-text="是" inactive-text="否"
                        active-value="1" inactive-value="0" />
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <div style="border: 1px solid #ccc;width: 100%">
                        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"
                            :defaultConfig="toolbarConfig" :mode="mode" />
                        <Editor style="height: 500px; overflow-y: hidden;" v-model="form.content"
                            :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSubmit(formRef)" type="primary">
                        发布公告
                    </el-button>
                </el-form-item>
            </el-form>

        </el-card>
    </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { onBeforeUnmount, ref, shallowRef, onMounted, reactive } from 'vue'
import Notice from '@/api/notice';
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
//获取form表单实例化对象
let formRef = ref();


// const value3 = ref(true);
// 内容 HTML
// const valueHtml = ref('<p>hello</p>')
const toolbarConfig = {}
const mode = ref('simple')
let form = reactive({
    title: '',
    is_sticky: '0',
    content: '',
})
//发布公告
function handleSubmit(formEl) {
    // 校验整个表单
    formEl.validate(async (valid) => {
        if (valid) {
            // 通过校验
            let { status, msg, data } = await Notice.add({ ...form });
            if (status) {
                ElMessage.success(msg);

            } else {
                ElMessage.error(msg);
            }

        }
    });
}

const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {},
}
//上传图片配置
editorConfig.MENU_CONF['uploadImage'] = {
    // form-data fieldName ，默认值 'wangeditor-uploaded-image'
    fieldName: 'file',
    server: 'http://localhost:3001/upload/editor/',
    headers: {
        Authorization: `Bearer ${sessionStorage.token}`,
    },
}
// 表单验证规则
const rules = reactive({
    title: [
        { required: true, message: '请输入标题内容！', trigger: 'blur' },

    ],

    content: [
        { required: true, message: '请输入公告内容！', trigger: 'blur' },
    ],
});
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
//创建阶段
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
</script>
